<!-- src/components/GradeAnalysis.vue -->
<template>
  <div>
    <h2>成绩分析内容</h2>

    <div class="analysis-content">
      <div class="stats">
        <p>课程名称: {{ courseName }}</p>
        <p>平均分: {{ averageScore }}</p>
        <p>及格率: {{ passRate }}%</p>
      </div>
      <div id="lineChart" class="chart"></div>
      <div id="pieChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  name: 'GradeAnalysis',
  data() {
    return {
      courseName: '',
      students: [],
      lineChart: null,
      pieChart: null
    };
  },
  computed: {
    averageScore() {
      const total = this.students.reduce((sum, student) => sum + student.score, 0);
      return (total / this.students.length).toFixed(2);
    },
    passRate() {
      const passCount = this.students.filter(student => student.score >= 60).length;
      return ((passCount / this.students.length) * 100).toFixed(2);
    }
  },
  mounted() {
    this.initLineChart();
    this.initPieChart();
  },
  created(){
    this.fetchScore()
  },
  methods: {
    fetchScore(){
        let courseId = this.$route.params.course.pkCid
        this.courseName = this.$route.params.course.courseName
        axios.get("/api/teacher/stus?courseId="+courseId).then(response => {
          this.students = response.data
          this.initLineChart() //更新折线图
          this.initPieChart() //更新饼图

        }).catch(err => {
          this.$message.error(err.response.data)
        })
    },
    initLineChart() {
      this.lineChart = echarts.init(document.getElementById('lineChart'));
      const option = {
        title: {
          text: '学生成绩分布'
        },
        tooltip: {},
        xAxis: {
          data: this.students.map(student => student.name)
        },
        yAxis: {},
        series: [{
          name: '成绩',
          type: 'line',
          data: this.students.map(student => student.score)
        }]
      };
      this.lineChart.setOption(option);
    },
    initPieChart() {
      this.pieChart = echarts.init(document.getElementById('pieChart'));
      const scoreRanges = [
        { name: '0-59', count: 0 },
        { name: '60-69', count: 0 },
        { name: '70-79', count: 0 },
        { name: '80-89', count: 0 },
        { name: '90-100', count: 0 }
      ];
      this.students.forEach(student => {
        if (student.score < 60) scoreRanges[0].count++;
        else if (student.score < 70) scoreRanges[1].count++;
        else if (student.score < 80) scoreRanges[2].count++;
        else if (student.score < 90) scoreRanges[3].count++;
        else scoreRanges[4].count++;
      });
      const option = {
        title: {
          text: '学生成绩区间分析'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '成绩区间',
          type: 'pie',
          radius: '50%',
          data: scoreRanges.map(range => ({ name: range.name, value: range.count }))
        }]
      };
      this.pieChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.breadcrumb {
  margin-bottom: 20px;
}

.analysis-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats {
  margin-bottom: 20px;
}

.chart {
  width: 80%;
  height: 400px;
  margin-bottom: 20px;
}
</style>